<template>
  <Layout>
    <PageHeaderNew :items="items"></PageHeaderNew>
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-body">
            <h5 class="mb-4 font-size-16">角色名称：开发者2</h5>
            <div style="display: flex;">
              <div class="col-lg-6">
                <div class="form-group row">
                  <div class="group_k">爬虫管理:</div>
                  <div class="group_v">
                    <el-checkbox-group v-model="reptileList">
                      <el-checkbox label="复选框1"></el-checkbox>
                      <el-checkbox label="复选框2"></el-checkbox>
                      <el-checkbox label="复选框3"></el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="form-group row">
                  <div class="group_k">客户管理:</div>
                  <div class="group_v">
                    <el-checkbox-group v-model="customerList">
                      <el-checkbox label="复选框1"></el-checkbox>
                      <el-checkbox label="复选框2"></el-checkbox>
                      <el-checkbox label="复选框3"></el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
              </div>
            </div>
            <div style="display: flex;">
              <div class="col-lg-6">
                <div class="form-group row">
                  <div class="group_k">用户管理:</div>
                  <div class="group_v">
                    <el-checkbox-group v-model="userList">
                      <el-checkbox label="复选框1"></el-checkbox>
                      <el-checkbox label="复选框2"></el-checkbox>
                      <el-checkbox label="复选框3"></el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="form-group row">
                  <div class="group_k">日志管理:</div>
                  <div class="group_v">
                    <el-checkbox-group v-model="journalList">
                      <el-checkbox label="复选框1"></el-checkbox>
                      <el-checkbox label="复选框2"></el-checkbox>
                      <el-checkbox label="复选框3"></el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
              </div>
            </div>
            <div style="display: flex;">
              <div class="col-lg-6">
                <div class="form-group row">
                  <div class="group_k">标签管理:</div>
                  <div class="group_v">
                    <el-checkbox-group v-model="labelList">
                      <el-checkbox label="复选框1"></el-checkbox>
                      <el-checkbox label="复选框2"></el-checkbox>
                      <el-checkbox label="复选框3"></el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="form-group row">
                  <div class="group_k">信源管理:</div>
                  <div class="group_v">
                    <el-checkbox-group v-model="sourceList">
                      <el-checkbox label="复选框1"></el-checkbox>
                      <el-checkbox label="复选框2"></el-checkbox>
                      <el-checkbox label="复选框3"></el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
              </div>
            </div>
            <div style="display: flex;">
              <div class="col-lg-6">
                <div class="form-group row">
                  <div class="group_k">资源管理:</div>
                  <div class="group_v">
                    <el-checkbox-group v-model="resourcesList">
                      <el-checkbox label="复选框1"></el-checkbox>
                      <el-checkbox label="复选框2"></el-checkbox>
                      <el-checkbox label="复选框3"></el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="form-group row">
                  <div class="group_k">数据管理:</div>
                  <div class="group_v">
                    <el-checkbox-group v-model="dataList">
                      <el-checkbox label="复选框1"></el-checkbox>
                      <el-checkbox label="复选框2"></el-checkbox>
                      <el-checkbox label="复选框3"></el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>
<script>
import Layout from "../../layouts/main";
import PageHeaderNew from "@/components/page-header-new";
export default {
  components: {
    Layout,
    PageHeaderNew,
  },
  data () {
    return {
      items: [
        {
          text: "用户管理",
          url: "/user",
        },{
          text: "角色管理",
          url: "/user/roleManagement",
        },{
          text: "角色详情",
          url: "",
        }
      ],
      reptileList: ['复选框1'],
      customerList: ['复选框1'],
      userList: ['复选框1'],
      journalList: ['复选框1'],
      labelList: ['复选框1'],
      sourceList: ['复选框1'],
      resourcesList: ['复选框1'],
      dataList: ['复选框1'],
    }
  }
}
</script>
<style lang="scss" scoped>
.group_k{
  margin-right: 10px;
}
::v-deep .el-radio__input.is-checked .el-radio__inner,
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
    border-color: #5664d2;
    background: #5664d2;
}
::v-deep .el-radio__input.is-checked+.el-radio__label,
::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #5664d2;
}
</style>
